<template>
  <view>
    <Navbar :title="userData.mall ? (userData.mall.shop_name || '青创云店') : '青创云店'"></Navbar>
    <view class="u-m-20">
      <u-swiper :list="goodsData.info.head_image" height="700" img-mode="aspectFill"></u-swiper>
      <view class="u-m-t-20 u-p-25 u-form-box">
        <view class="u-flex u-row-between">
          <view class="u-flex-1 u-font-38 u-font-bold">{{ goodsData.info.name }}</view>
          <view class="u-flex shareBox" @click="shareShow = true">
            <u-icon name="zhuanfa" color="#fff"></u-icon>
            <view class="u-font-26 u-m-l-5">分享</view>
          </view>
        </view>
        <view class="u-color-gray u-m-t-5">{{ goodsData.info.des }}</view>
        <view class="u-m-t-10">
          <span class="u-m-r-5 u-font-34 u-font-bold u-color-red">¥</span>
          <span class="u-m-r-10 u-color-red u-font-bold" style="font-size: 30px;">{{ goodsData.info.vip_price }}</span>
          <span class="u-color-gray u-font-line">¥{{ goodsData.info.price }}</span>
        </view>
        <view class="u-m-t-10 u-flex u-row-between" v-if="!isPresident">
          <view class="u-color-red">青创私董可获得50%积分奖励</view>
          <view class="shareBox" @click="onApplyPresident">申请成为青创私董</view>
        </view>
      </view>
    </view>
    <view class="u-m-t-30 u-m-20">
      <view class="u-flex u-p-t-20 u-p-b-20 u-color-gray">
        <hr class="u-flex-1 desline">
        </hr>
        <view class="u-m-l-20 u-m-r-20">商品详情</view>
        <view class="u-flex-1 desline"></view>
      </view>
      <!-- <rich-text :nodes="goodsData.info.describe"></rich-text> -->

      <u-parse class="u-radius-20" :html="goodsData.info.describe" :selectable="true" :tag-style="style"
        :lazy-load="true"></u-parse>
    </view>
    <view class="u-m-20 u-m-t-30" v-if="recommendList[0]">
      <view class="u-m-t-20 u-p-25 u-form-box">
        <view class="u-m-b-20 u-font-34 u-font-bold">推荐商品</view>
        <scroll-view scroll-x="true" style="height: 340rpx;">
          <view class="recommendItem" v-for="item in recommendList" :key="item.id">
            <view class="content">
              <view>
                <u-image width="100%" height="200rpx" :src="item.head_image[0]"></u-image>
                <view class="u-m-t-15">{{ item.name }}</view>
              </view>
              <view class="u-flex u-row-between">
                <view class="u-color-red u-font-bold">
                  <span class="u-font-24">¥</span>
                  <span class="u-font-32">{{ item.vip_price }}</span>
                </view>
                <view class="u-relative" @click.native.stop="onAddCart(item)">
                  <u-icon name="plus-circle-fill" color="#B3723E" size="52"></u-icon>
                  <view class="num" v-if="item.num > 0">{{ item.num }}</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view style="height: 200rpx;"></view>

    <view class="shop_bottom">
      <view class="shop_box">
        <view></view>
        <view class="car" @click="cartPopupData.show = true">
          <u-icon name="shopping-cart" color="#fff" size="68"></u-icon>
          <view class="num" v-if="cartPopupData.num > 0">{{ cartPopupData.num }}</view>
        </view>
        <view class="button" @click="onAddCart(goodsData.info)">加入购物车</view>
        <view class="pay" @click="onPay()">立即购买</view>
      </view>
    </view>

    <!-- 数量选择 -->
    <u-popup mode="bottom" border-radius="20" v-model="numberPopupData.show">
      <view class="number">
        <view class="numberGoods">
          <view class="u-flex u-col-top">
            <image :src="goodsData.info.head_image[0]"></image>
            <view class="u-m-l-20">
              <view class="u-font-28 u-font-bold">{{ goodsData.info.name }}</view>
              <view class="u-m-t-15">
                <span class="u-font-bold u-font-24 u-color-red">¥</span>
                <span class="u-font-bold u-font-36 u-color-red">{{ goodsData.info.vip_price }}</span>
              </view>
            </view>
          </view>
        </view>
        <view class="u-flex u-row-between u-back-white u-p-25 u-radius-20 u-p-t-25 u-p-b-25">
          <view>购买数量</view>
          <view>
            <u-number-box v-model="numberPopupData.num" @minus="onReductNumber()" @plus="onAddNumber()"></u-number-box>
          </view>
        </view>
        <view class="button" @click="onNumberOperate()" v-if="numberPopupData.type == 1">加入购物车</view>
        <view class="pay" @click="onNumberOperate()" v-else>立即购买</view>
      </view>
    </u-popup>

    <!-- 购物车弹出窗 -->
    <u-popup mode="bottom" border-radius="20" height="800" v-model="cartPopupData.show">
      <view class="cart">
        <view class="u-flex u-row-between u-color-puce u-m-b-20">
          <view class="u-font-34 u-font-bold">购物车</view>
          <view class="u-flex" @click="onClearCart()">
            <u-icon name="shanchu" custom-prefix="custom-icon" size="40" color="#B3723E"></u-icon>
            <view class="u-m-l-15">清空</view>
          </view>
        </view>
        <view class="goods">
          <scroll-view scroll-y="true" class="u-height-100">
            <view class="goods_item" v-for="cartItem in cartPopupData.list" :key="cartItem.id">
              <image :src="cartItem.goods.head_image[0]"></image>
              <view class="u-flex-1 u-m-l-20 u-flex-col u-row-between" style="height: 150rpx">
                <view>
                  <view class="u-font-30 u-font-bold">{{ cartItem.goods.name }}</view>
                  <view class="u-font-24 u-color-lightGray u-m-t-5 u-ellipsis">{{ cartItem.goods.des }}
                  </view>
                </view>
                <view class="u-flex u-row-between">
                  <view>
                    <span class="u-font-bold u-font-24 u-color-red">¥</span>
                    <span class="u-font-bold u-font-32 u-color-red">{{ cartItem.goods.vip_price }}</span>
                    <span class="u-m-l-10 u-font-22 u-color-gray u-font-line">¥{{ cartItem.goods.price }}</span>
                  </view>
                  <view class="u-relative">
                    <u-number-box v-model="cartItem.num" :min="1" @minus="onReductCart(cartItem.goods)"
                      @plus="onAddCart(cartItem.goods)"></u-number-box>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="pay" @click="onSwitchPay()">去结算</view>
      </view>
    </u-popup>

    <!-- 分享 -->
    <Share :isShowShare="shareShow" @closeShare="shareShow = false"></Share>

    <!-- 通用提示框 -->
    <Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
      :showCancel="modal.showCancel" @confirm="modalConfirm" @cancel="modalCancel"></Modal>
  </view>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Share from '@/components/Share.vue'
import Modal from '@/components/Modal.vue'
import share from '@/mixins/share.js'
import {
  userLogin,
  userInfo,
} from '@/network/api.js'
import {
  teaGoodsInfo,
  teaCartList,
  teaGoodsList,
  teaCartClear,
  teaCartReduce,
  teaCartAdd
} from '@/network/tea.js'
import {
  setUserStorageSync,
  formatContent
} from '@/utils/index.js'
export default {
  mixins: [share],
  components: {
    Navbar,
    Share,
    Modal
  },
  data() {
    return {
      goodsId: 0,
      userData: {},
      userId: uni.getStorageSync("user_id"),
      goodsData: {},
      cartPopupData: {
        show: false,
        price: 0,
        num: 0,
        list: []
      },
      numberPopupData: {
        show: false,
        num: 1,
        type: 1 // 1 购物车  2 结算
      },
      shareShow: false,
      recommendList: [],
      modal: {
        show: false,
        showCancel: false,
        confirm: '申请',
        cancel: '取消',
        content: ''
      },
      style: {
        div: 'padding: 0 !important',
        video: 'width: 100%'
      },
      isPresident: false // 是否是青创私董
    }
  },
  async onLoad(options) {
    wx.hideShareMenu()

    await this.handleLogin()

    this.userId = uni.getStorageSync("user_id") ? uni.getStorageSync("user_id") : ''
    this.goodsId = options.id
    this.onGetGoodsInfo()
    this.onGetRecommendGoods()
    if (Number(uni.getStorageSync("president_status")) >= 5) {
      this.isPresident = true
    }
    console.log(options, '商品');

    this.handleGetUserInfo(options.inviterId)

    setTimeout(() => {
      this.onGetUserCartList()
    }, 200)
  },
  methods: {
    handleLogin() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success(res) {
            userLogin({
              code: res.code
            }).then(res => {
              setUserStorageSync(res.data)
              resolve(res.data)
            })
          }
        })
      })
    },
    handleGetUserInfo(inviterId) {
      userInfo({
        user_id: this.userId,
        is_share: inviterId ? 1 : ''
      }).then(res => {
        this.userData = res.data
        
      })
    },
    async onGetGoodsInfo() {
      const params = {
        user_id: this.userId,
        goods_id: this.goodsId
      }
      const res = await teaGoodsInfo(params)
      this.mixinsShare.title = res.data.info.name
      this.mixinsShare.des = res.data.info.des
      this.mixinsShare.image = res.data.info.head_image[0]
      this.mixinsShare.page =
        `/teaBureau/teaGoodsDetail/teaGoodsDetail?id=${res.data.info.id}&inviterId=${this.userId}`
      console.log(this.mixinsShare, '分享链接');
      setTimeout(() => {
        wx.showShareMenu({
          withShareTicket: true,
          menus: ['shareAppMessage', 'shareTimeline']
        })
      }, 1000)
      res.data.info.describe = formatContent(res.data.info.describe)
      this.goodsData = res.data
    },
    async onGetUserCartList() {
      const res = await teaCartList({
        user_id: this.userId
      })
      this.cartPopupData.list = res.data
      /* 计算数量 */
      let num = 0
      res.data.map(item => {
        this.recommendList.map(recoItem => {
          if (item.goods_id == recoItem.id) {
            recoItem.num = item.num
          }
        })
        num += item.num
      })
      this.cartPopupData.num = num
      /* 同步数量 */
    },
    async onGetRecommendGoods() {
      const params = {
        recommend: this.goodsId,
        page: 1,
        limit: 10
      }
      const res = await teaGoodsList(params)
      this.recommendList = res.data.list
    },
    /* 清空购物车 */
    async onClearCart() {
      const res = await teaCartClear({
        user_id: this.userId,
        position: 2
      })
      this.onGetUserCartList()
      this.cartPopupData.show = false
    },
    /* 添加购物车 */
    async onAddCart(val) {
      /* const params = {
        user_id: this.userId,
        goods_id: val.id,
        num: 1,
        sku_id: ''
      }
      const res = await teaCartAdd(params)
      this.onGetUserCartList()
      this.modal.content = '已添加至购物车'
      this.modal.cancel = '继续购物'
      this.modal.confirm = '去结算'
      this.modal.showCancel = true
      this.modal.show = true */
      this.numberPopupData.num = 1
      this.numberPopupData.type = 1
      this.numberPopupData.show = true
    },
    /* 申请青创私董 */
    onApplyPresident() {
      uni.navigateTo({
        url: "/teaBureau/teaAgreement/teaAgreement"
      })
    },
    modalCancel() {
      this.modal.show = false
    },
    modalConfirm() {
      this.modal.show = false
      uni.navigateTo({
        url: "/teaBureau/teaPointOrder/teaPointOrder"
      })
    },
    /* 减少购物车 */
    async onReductCart(val) {
      const params = {
        user_id: this.userId,
        goods_id: val.id,
        num: 1,
        sku_id: '',
        position: 2
      }
      const res = await teaCartReduce(params)
      this.onGetUserCartList()
    },
    /* 去结算 */
    async onPay() {
      /* const params = {
        user_id: this.userId,
        goods_id: this.goodsData.info.id,
        num: 1,
        sku_id: ''
      }
      const res = await teaCartAdd(params)
      uni.navigateTo({
        url: "/teaBureau/teaPointOrder/teaPointOrder?id=" + this.goodsData.info.id
      }) */
      this.numberPopupData.num = 1
      this.numberPopupData.type = 2
      this.numberPopupData.show = true
    },
    // 数量弹出减少
    onReductNumber() {
      if (this.numberPopupData.num == 1) {
        return
      } else {
        this.numberPopupData.num--
      }
    },
    // 数量弹出增加
    onAddNumber() {
      this.numberPopupData.num++
    },
    // 数量弹出操作
    async onNumberOperate() {
      const userStauts = uni.getStorageSync("user_status")

      switch (this.numberPopupData.type) {
        case 1:
          const cartData = {
            user_id: this.userId,
            goods_id: this.goodsData.info.id,
            num: this.numberPopupData.num,
            sku_id: '',
            position: 2
          }
          const res = await teaCartAdd(cartData)
          this.onGetUserCartList()
          break;
        case 2:
          const params = {
            id: this.goodsData.info.id,
            num: this.numberPopupData.num
          }
          if (userStauts == 0) {
            uni.navigateTo({
              url: "/pages/register/registerShop?data=" + JSON.stringify(params)
            })
          } else {
            uni.navigateTo({
              url: "/teaBureau/teaPointOrder/teaPointOrder?data=" + JSON.stringify(params)
            })
          }
          break;
      }
      this.numberPopupData.show = false
    },
    /* 跳转订单确认 */
    onSwitchPay() {
      uni.navigateTo({
        url: "/teaBureau/teaPointOrder/teaPointOrder"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.desline {
  border-bottom: 1rpx solid #ccc;
}

.shop_bottom {
  position: fixed;
  z-index: 999;
  background: #fff;
  padding: 24rpx 24rpx 48rpx 24rpx;
  width: 100%;
  bottom: 0;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.2);

  .shop_box {
    position: relative;
    display: flex;
    justify-content: flex-end;

    .car {
      position: absolute;
      top: -40rpx;
      left: 0;
      background: #B3723E;
      display: flex;
      padding: 20rpx;
      border-radius: 50rpx;

      .num {
        position: absolute;
        right: -8rpx;
        top: -10rpx;
        background: #fff;
        border: 1rpx solid #B3723E;
        padding: 2rpx 10rpx;
        border-radius: 50rpx;
        font-size: 24rpx;
        color: #B3723E;
        font-weight: bold;
      }
    }

    .button {
      background: #B3723E;
      color: #fff;
      padding: 20rpx 60rpx;
      font-size: 30rpx;
      margin-left: 20rpx;
      border-radius: 50rpx;
    }

    .pay {
      background: #F84D3F;
      color: #fff;
      padding: 20rpx 60rpx;
      font-size: 30rpx;
      margin-left: 20rpx;
      border-radius: 50rpx;
    }
  }
}

.cart {
  padding: 30rpx 30rpx 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  height: 100%;

  .goods {
    flex: 1;
    overflow-y: auto;
  }

  .button {
    background: #B3723E;
    color: #fff;
    padding: 20rpx 0;
    font-size: 30rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 30rpx;
  }

  .pay {
    background: #ee2424;
    color: #fff;
    padding: 20rpx 0;
    font-size: 30rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 30rpx;
  }

  .goods_item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;

    .num {
      position: absolute;
      right: -6rpx;
      top: -10rpx;
      background: #ee2424;
      color: #fff;
      padding: 4rpx 8rpx;
      font-size: 16rpx;
      border-radius: 50rpx;
      border: 1rpx solid #fff;
    }

    .drawerIcon {
      opacity: 0.4;
    }

    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 10rpx;
    }
  }
}

.number {
  padding: 25rpx 25rpx 50rpx 25rpx;
  background: #eee;

  .numberGoods {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    background: #fff;
    padding: 20rpx;
    border-radius: 20rpx;

    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 10rpx;
    }
  }

  .button {
    background: #B3723E;
    color: #fff;
    padding: 20rpx 0;
    font-size: 30rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 30rpx;
  }

  .pay {
    background: #ee2424;
    color: #fff;
    padding: 20rpx 0;
    font-size: 30rpx;
    text-align: center;
    border-radius: 50rpx;
    margin-top: 30rpx;
  }
}

.shareBox {
  background: #E6BF91;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 50rpx;
}

.num {
  position: absolute;
  right: -6rpx;
  top: -10rpx;
  background: #ee2424;
  color: #fff;
  padding: 4rpx 8rpx;
  font-size: 16rpx;
  border-radius: 50rpx;
  border: 1rpx solid #fff;
}

scroll-view {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}

.recommendItem {
  width: 240rpx;
  height: 100%;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  margin-right: 25rpx;
  display: inline-block;
  padding: 15rpx;

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>